import "./index.scss";
export default defineComponent({
	setup() {
		return () => {
			return (
				<div class="dashboard-guide-home">
					<div class="left">
						<DevicePage />
					</div>
					<div class="right">
						<RightMaster />
						<RightSlide />
					</div>
				</div>
			);
		};
	}
});

import { getDeviceList } from "@/api/modules/iot/device";
import { GatewayType } from "@/api/interface/iot";
// import { PublicStore } from "@/stores/modules/public";
const DevicePage = defineComponent({
	setup() {
		const state = reactive({
			page: {
				dataList: [] as Device.ResDeviceInfo[],
				pageIndex: 1,
				pageSize: 12,
				total: 0
			},
			modeImg: {} as any,
			productMap: {} as any
		});
		const timer = ref();
		// const websocket = ref();
		onMounted(async () => {
			// const ws = new WebSocket(
			// 	`ws://${window.location.host}/api/device/websocket?sn=18672992442-22021211RC-SYSTEM&needFirst=true&token=${
			// 		PublicStore().token
			// 	}`
			// );
			// ws.onopen = () => {};
			let res = await getProductList({ pageIndex: 1, pageSize: 9999, deviceType: GatewayType.Device });
			let prodList = res.result?.records || [];
			prodList.forEach((item: any) => {
				state.productMap[item.model] = item;
			});
			console.log(state.productMap);
			loadData();
			timer.value = setInterval(() => {
				loadData();
			}, 5000);
		});
		onUnmounted(() => {
			clearInterval(timer.value);
		});
		const loadData = async () => {
			//查询设备列表
			let { result } = await getDeviceList({
				pageIndex: state.page.pageIndex,
				pageSize: state.page.pageSize,
				deptIdNot: deptAnonymous
			});
			state.page.dataList = result.records;
			state.page.total = result.total;
			loadModeImg();
			return;
			loadSensorData();
		};
		const loadModeImg = async () => {
			let arr: any = [];
			state.page.dataList.map((item: any) => {
				if (item.productModel && !arr.includes(item.productModel) && !state.modeImg.hasOwnProperty(item.productModel)) {
					arr.push(item.productModel);
				}
			});
			if (!arr.length) return;
			let res = await getProductList({ productModels: arr.toString(), pageIndex: 1, pageSize: arr.length }, true);
			if (res.code == 200 && res.result) {
				res.result.records.map((item: any) => (state.modeImg[item.model] = item.photo));
			}
		};
		const loadSensorData = async () => {
			//查询设备列表
			let { result } = await getPageList(
				{
					pageIndex: 1,
					pageSize: 9999,
					keyNot:
						"timestamp,id,55,36,29,30,6155,Addr,BaudRate,103.min,103.max,103.phase,103.cycle,104.min,104.max,104.phase,104.cycle,4200.min,4200.max,4200.phase,4200.cycle,4201.min,4201.max,4201.phase,4201.cycle,4206.min,4206.max,4206.phase,4206.cycle",
					sns: state.page.dataList.map(item => item.sn).join(",")
				},
				true
			);
			state.page.dataList = state.page.dataList.map(item => {
				item.variableList = result.records?.filter((varItem: any) => varItem.sn == item.sn) || [];
				return item;
			});
		};
		const handleSizeChange = () => {
			loadData();
		};
		const handleCurrentChange = () => {
			loadData();
		};
		const clickDetail = (item: any) => {
			gotoPage(RouterPath.deviceDetail, { sn: item.sn });
		};

		return () => {
			return (
				<div class="device-list-page">
					{state.page.dataList.length ? (
						<>
							<el-row gutter={25}>
								{state.page.dataList.map((item: any, i) => {
									return (
										<el-col span={6} class="device-container">
											<el-card body-style={{ padding: "0", border: "none" }}>
												<div
													class="body"
													style={{
														backgroundImage: `url("http://ssiot.cc/public/dashboard/guide-home/device/device-bg-${i % 7}.png")`
													}}
												>
													<div
														class="device-overview"
														style={{
															backgroundImage: state.modeImg[item.productModel]
																? `url(${filePrefix()}${state.modeImg[item.productModel]})`
																: 'url("http://ssiot.cc/public/dashboard/guide-home/device/comm-device.png")'
														}}
													></div>
													<div class="goto-detail" onClick={() => clickDetail(item)}>
														{/* <el-button class="detail-btn" type="primary" onClick={() => clickDetail(item)}>
															查看详情
														</el-button> */}
													</div>
												</div>
											</el-card>
											<div class="device-status">
												<div class="basic">
													<div class="name">{item.name || item.sn}</div>
													<div class="last-live-time text-right">
														{state.productMap?.[item.productModel]?.name == item.name
															? ""
															: state.productMap?.[item.productModel]?.name}
													</div>
												</div>
												<div class="status">
													<div class="value-info flex">
														<div class="last-live-time">{item.lastLiveTime || "--"}</div>
														{/* {item.variableList?.slice(0, 5)?.map((variable: any) => {
															return (
																<div class="item pr-4">
																	<span class="label">{variable.label}: </span>
																	<span class="value">
																		{variable.data[variable.key]
																			? typeof variable.data[variable.key] == "object"
																				? JSON.stringify(variable.data[variable.key])
																				: variable.data[variable.key]
																			: "--"}
																	</span>
																</div>
															);
														})} */}
													</div>
													{item.lastLiveTime ? (
														<PublicTag
															v-model={item.alarmStatus}
															types={{ false: "success", true: "danger" }}
															labels={{ false: "正常", true: "告警" }}
														/>
													) : (
														"--"
													)}
												</div>
											</div>
										</el-col>
									);
								})}
							</el-row>
							<el-pagination
								background
								v-model:current-page={state.page.pageIndex}
								v-model:page-size={state.page.pageSize}
								page-sizes={[12, 24, 100, 500]}
								layout="total, sizes, prev, pager, next, jumper"
								total={state.page.total}
								onSizeChange={handleSizeChange}
								onCurrentChange={handleCurrentChange}
							/>
						</>
					) : (
						<EmpytGuide />
					)}
				</div>
			);
		};
	}
});

const EmpytGuide = defineComponent({
	setup() {
		const steps = [
			{
				title: "1.微信扫码",
				descript: "微信扫码，打开SanSan",
				des: "小程序",
				iocn: "查看详情"
			},
			{
				title: "2.打开应用",
				descript: '进入"小应用"菜单，选择一',
				des: '个应用，如"陀螺仪"',
				iocn: "查看详情"
			},
			{
				title: "3.上报数据",
				descript: "点击添加设备，然后晃动或者移动手",
				des: "机，触发手机的数据变化",
				iocn: "查看详情"
			},
			{
				title: "4.查看数据",
				descript: "登录三三平台，实时查看",
				des: "数据状态",
				iocn: "查看详情"
			}
		];
		return () => {
			return (
				<div class="empty-guide">
					<div class="guide-step">
						<div>
							<div class="step-bg">
								<div class="title">
									<span class="icon"></span>
									<span>微信接入设备引导</span>
								</div>
								<el-row gutter={20}>
									{steps.map((step, i) => {
										return (
											<el-col span={6}>
												<div class="step-item">
													<div class={["step-item-body", `step-${i + 1}`]}></div>
													<div class="step-text">
														<div class="step-item-title">{step.title}</div>
														<div class="step-item-descript">{step.descript}</div>
														<div class="step-item-descript">{step.des}</div>
													</div>
												</div>
											</el-col>
										);
									})}
								</el-row>
								<div class="line"></div>
							</div>
						</div>
						<div class="guide-simple">
							<div class="simple-left">
								<div>
									<p>上三三小程序</p>
									<span>助你轻松管理设备!</span>
								</div>
								<img class="img" src="http://ssiot.cc/public/dashboard/guide-home/guide/step-5.png" alt="" />
								<div class="stpe5">
									<span>登陆后平台端设备</span>
									<span>自动同步到小程序账号</span>
								</div>
							</div>
							<div class="simple-right">
								<div class="img-content">
									<img src="http://ssiot.cc/public/dashboard/guide-home/guide/guide-weixinmp-qrcode.png" alt="" />
									<div class="img-text">使用手机微信扫描二维码</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			);
		};
	}
});

//右侧
const RightMaster = defineComponent({
	emits: [],
	setup() {
		const dataList = ref([
			{
				title: "三三物联网可以提供哪些服务",
				descript:
					"物联网应用覆盖了工业、电力、农业、商业等各行各业。物联网需求是海量、碎片化的，多元异构的物联网平台技术复杂且多样，开发成本高，三三物联网平台（SANSAN）为您提供多元异构设备的接入与管理、数据存储与转发、告警、规则引擎、多租户等核心能力，基于SANSAN平台的核心能力，可快速开发您的物联网应用。",
				link: "https://www.sansaniot.com/index.html"
			},
			{
				title: "物联网设备模型与产品模版",
				descript:
					"产品是一类同类设备的统称，它表示一个抽象的设备模型。比如 “温湿度传感器” 就是一个产品,它定义了温湿度传感器的属性、功能等通用信息。产品可以将一类设备的变量模型、设备配置、控制功能固化，在创建设备的时候，只要选择了 “产品”，设备自动具备 “产品” 的变量模型、配置、控制功能。 因此，“产品” 可以看作设备的模板。",
				link: "https://doc.sansaniot.com/docs/product-init-device"
			}
		]);
		const clickLink = (link: any) => {
			window.open(link, "_blank");
		};
		return () => {
			return (
				<div class="right-master">
					{dataList.value.map((item, index) => {
						return (
							<div class={["sansan-info", `row-${index}`]}>
								<div class="title">{item.title}</div>
								<div class="descript-text">{item.descript}</div>
								<div class="more-link cursor-pointer hover:opacity-70" onClick={() => clickLink(item.link)}>
									<span class="pr-2">查看详情</span>
									<span class="iconfont iconbx-right-arrow-alt"></span>
								</div>
							</div>
						);
					})}
				</div>
			);
		};
	}
});

import { EffectCoverflow, Navigation, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css/bundle";
import PublicTag from "@/components/Sansan/Status/PublicTag";
import { deptAnonymous } from "@/utils/constants";
import { Device } from "@/api/interface/iot";
import { getPageList } from "@/api/modules/iot/variable";
import { gotoPage } from "@/utils/routerUtil";
import { RouterPath } from "@/enums/routerPath";
import { getProductList } from "@/api/modules/iot/product";
import { filePrefix } from "@/hooks/useSystem";
import slideImg from "@/assets/images/dashboard/slide-img.png";
const RightSlide = defineComponent({
	emits: [],
	setup() {
		const dataList = ref([
			{
				title: "快速接入DTU设备",
				descript:
					"DTU（数据终端单元）是一种工业通信设备，它能够将现场设备的数据通过无线网络传输到远程监控或控制中心。通过三三内置的Modbus软网关，结合协议规范配置好点表（有时也称为寄存器表），即可快速实现DTU设备的数据采集与监控。在实际应用中，点表通常由设备的制造商提供，并包含了所有可访问的数据点。工程师和技术人员使用点表来配置Modbus控制器和监控系统，确保数据能够正确地采集、传输和处理。",
				link: "https://doc.sansaniot.com/docs/dtu-device-modbus"
			},
			{
				title: "添加视频设备并查看实时视频",
				descript:
					"视频软网关是一种软件解决方案，它允许不同厂家的视频设备通过标准化的协议和数据接口进行接入、管理和控制。三三平台的视频软网关（ssiot-gw-ms）支持目前主流的视频厂家协议和数据格式，摄像头类型包含了海康、大华、雄迈，支持rtsp/onvif/gb2818等协议，通过视频软网关可以实现对各厂家视频设备的接入，提供统一的管理和控制界面，从而简化视频系统的部署和维护工作。",
				link: "https://doc.sansaniot.com/docs/video-device-access"
			},
			{
				title: "使用个性业务化的设备详情",
				descript:
					"“设备详情”是设备各种信息的的集中展示，三三物联有丰富多彩的设备数据展示方式，支持统计图、图片、视频、地图等场景的元数据展示，可以使用三三云组态工具配置出具有沉浸式体验的设备展示页面。而且还支持用户自定义扩展展示页面，通过抽象设备的一类产品，设置产品的可视化模板，实现一类设备的个性化详情。",
				link: "https://doc.sansaniot.com/docs/product-init-device"
			},
			{
				title: "搭建边云数据协同解决方案",
				descript:
					"三三物联网平台的边缘云协同能力，可解决用户管理多现场系统的痛点，无需复杂的 VPN 配置，就可实现现场到云的无缝连接，大幅简化运维，提升工作效率。通过三三的边云协同服务，可以实现云端和边缘端的设备、分组、产品、传感量、告警、配置、控制功能的协同。每项协同功能都可以单独打开或者关闭。让您在云端管理边缘端的设备和数据就像管理云端自己的设备和数据一样简单。",
				link: "https://doc.sansaniot.com/blog/sansan-cloud-edge-delpoy"
			},
			{
				title: "使用规则引擎实现数据变形",
				descript:
					"规则引擎是一个处理引擎，对物联网设备数据进行加工处理，如数据清洗、补全、计算、统计等，实现数据的流计算和批处理。三三平台提供的规则引擎，可以让你通过可视化的方式，注入 JS 脚本到系统的数据处理流中，实现自定义的数据处理逻辑，除了可以利用 JS 的强大能力，让您用 JS 实现数据处理逻辑，三三还提供丰富的数据处理函数，供您在 JS 中调用。",
				link: "https://doc.sansaniot.com/docs/rule-engine-data-process"
			},
			{
				title: "定制个性化页面风格",
				descript:
					"针对您对系统的个性化需求，三三平台提供了个性化的系统设置。针对首页展示需求，系统设置了个性化的大屏模版与自定义主页入口，针对系统中性需求，系统支持按租户级别自定义设置系统Logo与系统标题。",
				link: "https://doc.sansaniot.com/docs/sansan-frontend-develop"
			}
		]);
		const clickLink = (link: any) => {
			window.open(link, "_blank");
		};
		let modules = [EffectCoverflow, Navigation, Pagination];
		return () => {
			return (
				<div class="right-slide">
					<el-image class="img" src={slideImg}></el-image>
					<div class="title">系统介绍</div>
					<div class="text-sky-300 pt-1">快速了解系统功能</div>
					<div class="swiper-content">
						<Swiper
							effect="coverflow"
							grabCursor
							centeredSlides
							loop
							slidesPerView="auto"
							coverflowEffect={
								{
									rotate: 50,
									stretch: 0,
									depth: 100,
									modifier: 1,
									slideShadows: true
								} as any
							}
							pagination={true as any}
							modules={modules}
						>
							{dataList.value.map(item => {
								return (
									<SwiperSlide class="swiper-item" style="width: 100%;height: 100%">
										<div class="swiper-item-box">
											<div class="title">{item.title}</div>
											<div class="descript-text swiper-word">{item.descript}</div>
											<div class="more-link cursor-pointer hover:opacity-70" onClick={() => clickLink(item.link)}>
												<span class="pr-2">查看详情</span>
												<span class="iconfont iconbx-right-arrow-alt"></span>
											</div>
										</div>
									</SwiperSlide>
								);
							})}
						</Swiper>
					</div>
				</div>
			);
		};
	}
});
